<template>
    <div class="editable-input" @click.stop>
        <div v-if="action === 'add'" class="checklist-new-item" :class="{'focus': textAreaFocus}">
            <textarea v-model="text" class="checklist-new-item-text" placeholder="Add Item…" @click="textAreaFocus = true"></textarea>
            <div class="btn-wrapper">
                <button class="btn btn-sm btn-success" @click="add">Add</button>
                <button type="button" class="icon" @click="close">×</button>
            </div>
        </div>
        <div v-else-if="action === 'edit'" class="checklist-item-row" :class="{'hide-on-edit': textAreaFocus}">
            <p class="outer-value" @click="_edit" :class="{'through': done}" style="margin: 0;">{{value}}</p>
            <textarea v-model="text" class="checklist-item-edit" ref="editTextarea"></textarea>
            <div class="btn-wrapper">
                <button class="btn btn-sm btn-success" @click="save">Save</button>
                <button type="button" class="icon" @click="close">×</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EditableInput",
        props: {
            action : {
                type: String,
                default: 'add'
            },
            value: {
                type: String,
                default: ''
            },
            done: {
                type: Boolean,
                default: false
            }
        },
        created() {
            $(document).bind('click',  () => {
                this.textAreaFocus = false
            })
        },
        data() {
            return {
                textAreaFocus: false,
                text: ''
            }
        },
        methods: {
            _edit() {
                this.textAreaFocus = true
                this.$nextTick(() => this.$refs.editTextarea.focus())
                this.text = this.value
            },
            add() {
                if (this.text.trim()) {
                    this.$emit('add', this.text)
                    this.$nextTick(() => {
                        this.text = ''
                        this.textAreaFocus = false
                    })

                }
            },
            close() {
                this.textAreaFocus = false
                this.text = this.action === 'edit' ? this.value : ''
            },
            save() {
                if (this.text.trim()) {
                    this.$emit('save', this.text)
                    this.$nextTick(() => {
                        this.textAreaFocus = false
                    })
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .editable-input
        .btn-wrapper
            display :none;
            .icon
                -webkit-appearance: none;
                padding: 0;
                cursor: pointer;
                background: 0 0;
                border: 0;
                font-size: 24px;
                font-weight: 700;
                line-height: 1;
                color: #000;
                text-shadow: 0 1px 0 #fff;
                opacity: .2;
                vertical-align :middle;
                margin-left: 4px;
                &:hover
                    opacity :.8;
        .checklist-new-item
            .checklist-new-item-text
                width :100%;
                height :54px;
                background-color: #fff;
                border: 0;
                box-shadow: none;
                box-sizing: border-box;
                -webkit-appearance: none;
                border-radius: 3px;
                display: block;
                line-height: 20px;
                margin-bottom: 12px;
                padding: 6px 8px;
                transition-property: background-color,border-color,box-shadow;
                transition-duration: 85ms;
                transition-timing-function: ease;
                resize :none;
            &.focus
                .checklist-new-item-text
                    border: 1px solid #5ba4cf;
                    box-shadow: 0 0 0 1px #5ba4cf;
                    resize :vertical;
                .btn-wrapper
                    display :block;

        .checklist-item-row
            .outer-value
                cursor :pointer;
                &.through
                    color: #6b808c;
                    font-style: italic;
                    text-decoration: line-through;
            .checklist-item-edit
                background: rgba(9,45,66,.04);
                border-color: rgba(9,45,66,.13);
                box-shadow: inset 0 0 0 1px rgba(9,45,66,.13);
                margin-bottom: 4px;
                width :100%;
                height :54px;
                display:none;
                resize: vertical;
            &.hide-on-edit
                .outer-value
                    display :none;
                .checklist-item-edit
                    display :block;
                .btn-wrapper
                    display :block;

</style>